import React, { useState, useEffect } from 'react';
import { Outlet } from 'react-router-dom';
import { isMobileDevice } from '../utils/platform';
import { 
  Header, 
  HeaderLeft, 
  HeaderRight,
  Logo,
  CreateButton,
  Notification,
  UserAvatar,
  type NotificationItem,
  type CreateMenuItem,
  type UserMenuItem
} from "@repo/ui";
import RouterNavigation, { type NavItem } from './RouterNavigation';

// 模拟通知数据
const mockNotifications: NotificationItem[] = [
  {
    id: '1',
    title: '系统更新',
    message: '新版本已发布，包含多项功能改进和性能优化。',
    time: '2分钟前',
    isRead: false,
    type: 'info'
  },
  {
    id: '2',
    title: '任务完成',
    message: '您的数据导出任务已成功完成，可以下载了。',
    time: '10分钟前',
    isRead: false,
    type: 'success'
  },
  {
    id: '3',
    title: '安全提醒',
    message: '检测到异常登录尝试，请及时检查账户安全。',
    time: '1小时前',
    isRead: true,
    type: 'warning'
  },
  {
    id: '4',
    title: '存储空间不足',
    message: '您的存储空间使用率已达到90%，建议清理或升级。',
    time: '2小时前',
    isRead: true,
    type: 'error'
  }
];

// 导航菜单数据
const navItems: NavItem[] = [
  {
    label: '万象中枢',
    href: '/',
  },
  {
    label: '数据看板',
    href: '/dashboard',
  },
  {
    label: '灵犀智能',
    href: '/ai',
  },
  {
    label: '关于作者',
    href: '/about',
  }
];

// 移动端精简导航菜单
const mobileNavItems: NavItem[] = [
  {
    label: '首页',
    href: '/',
  },
  {
    label: '看板',
    href: '/dashboard',
  },
  {
    label: '智能',
    href: '/ai',
  },
  {
    label: '关于',
    href: '/about',
  }
];

// 用户菜单数据
const userMenuItems: UserMenuItem[] = [
  {
    label: '个人资料',
    icon: (
      <svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor">
        <path d="M10.561 8.073a6.005 6.005 0 0 1 3.432 5.142.75.75 0 1 1-1.498.07 4.5 4.5 0 0 0-8.99 0 .75.75 0 0 1-1.498-.07 6.004 6.004 0 0 1 3.431-5.142 3.999 3.999 0 1 1 5.123 0ZM10.5 5a2.5 2.5 0 1 0-5 0 2.5 2.5 0 0 0 5 0Z"/>
      </svg>
    ),
    onClick: () => console.log('View profile')
  },
  {
    label: '账户设置',
    icon: (
      <svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor">
        <path d="M8 0a8.2 8.2 0 0 1 .701.031C9.444.095 9.99.645 10.16 1.29l.288 1.107c.018.066.079.158.212.224.231.114.454.243.668.386.123.082.233.09.299.071l1.103-.303c.644-.176 1.392.021 1.82.63.27.385.506.792.704 1.218.315.675.111 1.422-.364 1.891l-.814.806c-.049.048-.098.147-.088.294.016.257.016.515 0 .772-.01.147.039.246.088.294l.814.806c.475.469.679 1.216.364 1.891a7.977 7.977 0 0 1-.704 1.218c-.428.609-1.176.806-1.82.63l-1.103-.303c-.066-.019-.176-.011-.299.071a4.851 4.851 0 0 1-.668.386c-.133.066-.194.158-.212.224l-.288 1.107c-.169.645-.715 1.195-1.459 1.26a8.006 8.006 0 0 1-1.402 0c-.744-.065-1.29-.615-1.459-1.26l-.288-1.107c-.018-.066-.079-.158-.212-.224a4.85 4.85 0 0 1-.668-.386c-.123-.082-.233-.09-.299-.071l-1.103.303c-.644.176-1.392-.021-1.82-.63a8.084 8.084 0 0 1-.704-1.218c-.315-.675-.111-1.422.363-1.891l.815-.806c.05-.048.098-.147.088-.294a6.214 6.214 0 0 1 0-.772c.01-.147-.038-.246-.088-.294l-.815-.806C.635 6.045.431 5.298.746 4.623a7.92 7.92 0 0 1 .704-1.217c.428-.61 1.176-.807 1.82-.63l1.102.302c.067.019.177.011.3-.071.214-.143.437-.272.668-.386.133-.066.194-.158.212-.224L5.84 1.29C6.009.645 6.556.095 7.299.03 7.53.01 7.764 0 8 0Zm-.571 1.525c-.036.003-.108.036-.137.146l-.289 1.105c-.147.561-.549.967-.998 1.189-.173.086-.34.183-.5.29-.417.278-.97.423-1.529.27l-1.103-.303c-.109-.03-.175.016-.195.045-.22.312-.412.644-.573.99-.014.031-.021.11.059.19l.815.806c.411.406.562.957.53 1.456a4.709 4.709 0 0 0 0 .582c.032.499-.119 1.05-.53 1.456l-.815.806c-.081.08-.073.159-.059.19.162.346.353.677.573.989.02.030.085.076.195.046l1.102-.303c.56-.153 1.113-.008 1.53.27.161.107.328.204.501.29.447.222.85.629.997 1.189l.289 1.105c.029.109.101.143.137.146a6.6 6.6 0 0 0 1.142 0c.036-.003.108-.036.137-.146l.289-1.105c.147-.561.549-.967.998-1.189.173-.086.34-.183.5-.29.417-.278.97-.423 1.529-.27l1.103.303c.109.029.175-.016.195-.045.22-.313.411-.644.573-.99.014-.031.021-.11-.059-.19l-.815-.806c-.411-.406-.562-.957-.53-1.456a4.709 4.709 0 0 0 0-.582c-.032-.499.119-1.05.53-1.456l.815-.806c.081-.08.073-.159.059-.19a6.464 6.464 0 0 0-.573-.989c-.02-.03-.085-.076-.195-.046l-1.102.303c-.56.153-1.113.008-1.53-.27a4.44 4.44 0 0 0-.501-.29c-.447-.222-.85-.629-.997-1.189l-.289-1.105c-.029-.11-.101-.143-.137-.146a6.6 6.6 0 0 0-1.142 0ZM11 8a3 3 0 1 1-6 0 3 3 0 0 1 6 0ZM9.5 8a1.5 1.5 0 1 0-3.001.001A1.5 1.5 0 0 0 9.5 8Z"/>
      </svg>
    ),
    onClick: () => console.log('Account settings')
  },
  {
    label: '帮助中心',
    icon: (
      <svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor">
        <path d="M0 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8Zm8-6.5a6.5 6.5 0 1 0 0 13 6.5 6.5 0 0 0 0-13ZM6.92 6.085c.081-.16.19-.299.34-.398.145-.097.371-.187.74-.187.28 0 .553.087.738.225A.613.613 0 0 1 9 6.25c0 .177-.04.264-.077.318a.956.956 0 0 1-.277.245c-.076.051-.158.098-.258.161l-.007.004c-.093.057-.204.123-.313.195-.109.071-.27.186-.382.343-.112.157-.195.344-.195.565v.009c0 .125.003.234.016.323.013.09.043.18.11.25.069.071.184.12.355.12.172 0 .287-.049.356-.12.067-.07.097-.16.11-.25.013-.089.016-.198.016-.323v-.009c0-.221.083-.408.195-.565.112-.157.273-.272.382-.343.109-.072.22-.138.313-.195l.007-.004c.1-.063.182-.11.258-.161a.956.956 0 0 0 .277-.245c.037-.054.077-.141.077-.318a1.613 1.613 0 0 0-.26-.525c-.185-.138-.458-.225-.738-.225-.369 0-.595.09-.74.187a1.044 1.044 0 0 0-.34.398 1.224 1.224 0 0 0-.154.5c0 .125.003.234.016.323.013.09.043.18.11.25.069.071.184.12.355.12.172 0 .287-.049.356-.12.067-.07.097-.16.11-.25.013-.089.016-.198.016-.323a.724.724 0 0 0-.154-.5ZM8 13a1 1 0 1 0 0-2 1 1 0 0 0 0 2Z"/>
      </svg>
    ),
    onClick: () => console.log('Help center')
  },
  {
    label: '退出登录',
    icon: (
      <svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor">
        <path d="M2 2.75C2 1.784 2.784 1 3.75 1h2.5a.75.75 0 0 1 0 1.5h-2.5a.25.25 0 0 0-.25.25v10.5c0 .138.112.25.25.25h2.5a.75.75 0 0 1 0 1.5h-2.5A1.75 1.75 0 0 1 2 13.25V2.75Zm6.56 4.5h5.69a.75.75 0 0 1 0 1.5H8.56l1.97 1.97a.749.749 0 0 1-.326 1.275.749.749 0 0 1-.734-.215L6.22 8.53a.75.75 0 0 1 0-1.06l3.25-3.25a.749.749 0 0 1 1.275.326.749.749 0 0 1-.215.734L8.56 7.25Z"/>
      </svg>
    ),
    onClick: () => console.log('Logout'),
    type: 'danger',
    divider: true
  }
];

// 创建按钮菜单数据
const createMenuItems: CreateMenuItem[] = [
  {
    label: '新建项目',
    icon: (
      <svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor">
        <path d="M14 1a1 1 0 0 1 1 1v8a1 1 0 0 1-1 1H2.5L1 13.5V2a1 1 0 0 1 1-1h12ZM2 2v9.5L3.5 10H14V2H2Z"/>
      </svg>
    ),
    onClick: () => console.log('Create project')
  },
  {
    label: '新建文档',
    icon: (
      <svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor">
        <path d="M2 2.5A2.5 2.5 0 0 1 4.5 0h8.75a.75.75 0 0 1 .75.75v12.5a.75.75 0 0 1-.75.75h-2.5a.75.75 0 0 1 0-1.5h1.75v-2h-8a1 1 0 0 0-.714 1.7.75.75 0 1 1-1.072 1.05A2.495 2.495 0 0 1 2 11.5v-9zm10.5-1V9h-8c-.356 0-.694.074-1 .208V2.5a1 1 0 0 1 1-1h8zM5 12.25v3.25a.25.25 0 0 0 .4.2l1.45-1.087a.25.25 0 0 1 .3 0L8.6 15.7a.25.25 0 0 0 .4-.2v-3.25a.25.25 0 0 0-.25-.25h-3.5a.25.25 0 0 0-.25.25z"/>
      </svg>
    ),
    onClick: () => console.log('Create document')
  },
  {
    label: '新建仓库',
    icon: (
      <svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor">
        <path d="M8 0c4.42 0 8 3.58 8 8a8.013 8.013 0 0 1-5.45 7.59c-.4.08-.55-.17-.55-.38 0-.27.01-1.13.01-2.2 0-.75-.25-1.23-.54-1.48 1.78-.2 3.65-.88 3.65-3.95 0-.88-.31-1.59-.82-2.15.08-.2.36-1.02-.08-2.12 0 0-.67-.22-2.2.82-.64-.18-1.32-.27-2-.27-.68 0-1.36.09-2 .27-1.53-1.03-2.2-.82-2.2-.82-.44 1.1-.16 1.92-.08 2.12-.51.56-.82 1.28-.82 2.15 0 3.06 1.86 3.75 3.64 3.95-.23.2-.44.55-.51 1.07-.46.21-1.61.55-2.33-.66-.15-.24-.6-.83-1.23-.82-.67.01-.27.38.01.53.34.19.73.9.82 1.13.16.45.68 1.31 2.69.94 0 .67.01 1.3.01 1.49 0 .21-.15.45-.55.38A7.995 7.995 0 0 1 0 8c0-4.42 3.58-8 8-8Z"/>
      </svg>
    ),
    onClick: () => console.log('Create repository')
  }
];

const Layout: React.FC = () => {
  // 使用平台检测工具函数
  const [isMobile, setIsMobile] = useState(() => isMobileDevice());

  // 监听窗口大小变化
  useEffect(() => {
    const handleResize = () => {
      setIsMobile(isMobileDevice());
    };
    
    window.addEventListener('resize', handleResize);
    
    return () => window.removeEventListener('resize', handleResize);
  }, []);

  const handleMarkAsRead = (id: string) => {
    console.log('Mark as read:', id);
  };

  const handleMarkAllAsRead = () => {
    console.log('Mark all as read');
  };

  const handleLoadMore = () => {
    console.log('Load more notifications');
  };

  return (
    <div className="min-h-screen bg-gray-50 overflow-x-hidden max-w-full">
      <Header>
        <HeaderLeft>
          <Logo onClick={() => console.log('Logo clicked')} />
          <RouterNavigation items={isMobile ? mobileNavItems : navItems} />
        </HeaderLeft>
        
        <HeaderRight>
          <CreateButton items={createMenuItems} />
          
          <Notification
            notifications={mockNotifications}
            hasMore={true}
            onLoadMore={handleLoadMore}
            onMarkAsRead={handleMarkAsRead}
            onMarkAllAsRead={handleMarkAllAsRead}
          />
          
          <UserAvatar 
            userName="韩小信"
            userEmail="573322978@qq.com"
            menuItems={userMenuItems}
          />
        </HeaderRight>
      </Header>
      
      <main className="overflow-x-hidden max-w-full">
        <Outlet />
      </main>
    </div>
  );
};

export default Layout;
